<template>
  <div>
    <el-form ref="queryForm" :model="queryForm" :inline="true" size="small">
      <!-- 顾客名称 -->
      <el-form-item label="顾客名称" prop="customerName">
        <el-select
          v-model="queryForm.customerName"
          filterable
          placeholder="请输入顾客名称"
          allow-create
          default-first-option
          clearable
          style="width: 8vw"
        >
          <el-option
            v-for="item in customerList"
            :key="item.id"
            :label="item.customerName"
            :value="item.customerName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 钢类 -->
      <el-form-item label="钢类" prop="steelTypeId">
        <el-select
          v-model="queryForm.steelTypeId"
          placeholder="请选择钢类"
          style="width: 8vw"
        >
        <el-option v-for="item in steelTypes" :key="item.id" :value="item.steelTypeName" :label="item.steelTypeName" />
        </el-select>
      </el-form-item>

      <!-- 钢种 -->
      <el-form-item label="钢种" prop="steelGradeId">
        <el-select
          v-model="queryForm.steelGradeId"
          placeholder="请选择钢种"
          style="width: 8vw"
          allow-create
          default-first-option
          clearable
          filterable
        >
          <el-option
            v-for="item in steelGradeList"
            :key="item.id"
            :value="item.steelGradeName"
            :label="item.steelGradeName"
          />
        </el-select>
      </el-form-item>

      <!-- 提交日期 -->
      <el-form-item label="提交日期" prop="submitTime">
        <el-date-picker
          v-model="queryForm.submitTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择提交日期"
          style="width: 8vw"
        >
        </el-date-picker>
      </el-form-item>

      <!-- 审核日期 -->
      <el-form-item label="审核日期" prop="auditTime">
        <el-date-picker
          v-model="queryForm.auditTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择审核日期"
          style="width: 8vw"
        >
        </el-date-picker>
      </el-form-item>

      <!-- 编号 -->
      <el-form-item label="编号" prop="code">
        <el-input
          v-model="queryForm.code"
          placeholder="请输入编号"
          style="width: 8vw"
        ></el-input>
      </el-form-item>

      <!-- 查询和重置按钮 -->
      <el-form-item>
        <el-button type="primary" @click="getReviewedOrder()">查询</el-button>
        <el-button
          type="success"
          @click="
            () => {
              $refs.queryForm.resetFields();
            }
          "
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-card style="height: 100%">
      <div slot="header">
        已审核订单
        <div style="float: right">
          <el-button type="warning" size="mini" @click="handleOrderClick"
            >选择订单复评</el-button
          >
          <!-- <el-button type="warning" size="mini" @click="goOrderRecord">修改意见订单记录</el-button> -->
        </div>
      </div>
      <hmi-table
        :table-data="tableData"
        :table-head="true"
        :is-pagination-show="true"
        :table-height="'calc(100vh - 230px)'"
        :total="total"
        :current-page="queryForm.current"
        :page-size="queryForm.page"
        @handle-size-change="handleSizeChange"
        @handle-current-change="handleCurrentChange"
        @handle-selection-change="handleSelectionChange"
      >
        <template slot="TableBody">
          <!-- 全选 -->
          <el-table-column type="selection" align="center"></el-table-column>
          <!-- 序号 -->
          <el-table-column
            label="序号"
            type="index"
            width="70"
            align="center"
          ></el-table-column>
          <!-- 编号 -->
          <el-table-column
            prop="code"
            label="编号"
            width="100"
            align="center"
          ></el-table-column>

          <!-- 顾客名称 -->
          <el-table-column
            prop="customerName"
            label="顾客名称"
            width="200"
            align="center"
          ></el-table-column>

          <!-- 顾客联系方式 -->
          <el-table-column
            prop="customerPhone"
            label="顾客联系方式"
            width="120"
            align="center"
          ></el-table-column>

          <!-- 钢类 -->
          <el-table-column prop="steelTypeName" label="钢类" align="center"></el-table-column>
          <!-- 钢种 -->
          <el-table-column prop="steelGradeName" label="钢种" align="center" show-overflow-tooltip></el-table-column>
          <!-- 标准 -->
          <el-table-column
            prop="standardName"
            label="标准"
            width="100px"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <!-- 规格 -->
          <el-table-column
            prop="specification"
            label="规格"
            width="100px"
            align="center"
          ></el-table-column>

          <!-- 数量 -->
          <el-table-column prop="steelNumber" label="数量" align="center">
            <template slot-scope="scope">
              {{ scope.row.steelNumber }}{{ scope.row.steelNumberUnit }}
            </template>
          </el-table-column>

          <!-- 交货状态 -->
          <el-table-column
            prop="deliveryStatus"
            label="交货状态"
            align="center"
            show-overflow-tooltip
          ></el-table-column>

          <!-- 加工用途 -->
          <el-table-column
            prop="processingPurpose"
            label="加工用途"
            align="center"
          ></el-table-column>

          <!-- 分发部门 -->
          <el-table-column
            prop="flow"
            label="分发部门"
            align="center"
          ></el-table-column>

          <!-- 提交时间 -->
          <el-table-column
            prop="submitTime"
            label="提交时间"
            width="150px"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ formatterTime(scope.row.submitTime) }}</span>
            </template>
          </el-table-column>

          <!-- 审核时间 -->
          <el-table-column
            prop="reviewTime"
            label="审核时间"
            width="150px"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ formatterTime(scope.row.reviewTime) }}</span>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </template>
      </hmi-table>
    </el-card>
  </div>
</template>

<script>
import HmiTable from "@/components/HmiTable.vue";
import { timeChange } from "@/lib/FormatTime";
import {
  GET_STANDARD_HISTORYORDER,
  GET_STEELGRADELIST,
  BACKORDER,
  GET_CUSTOMERNAMELIST,
  GET_STEELTYPELIST
} from "@/lib/Api.js";
import { post } from "@/lib/Util.js";
export default {
  components: {
    HmiTable
  },
  data() {
    return {
      queryForm: {
        auditTime: "",
        code: "",
        current: 1,
        customerName: "",
        page: 5,
        steelGradeId: "",
        steelTypeId: "",
        submitTime: ""
      },

      /* 设置总记录数 */
      total: 0,
      /* 设置分页数据 */
      tableData: [],
      selectedRows: [],
      customerList: [],
      steelGradeList: [],
      steelTypes: []
    };
  },
  mounted() {
    this.getReviewedOrder();
    this.getSteelGradeName();
    this.getCustomerNames();
    this.getsteelTypeNames();
  },
  methods: {
    formatterTime(time) {
      if (time !== "" && time !== undefined) {
        return timeChange(time);
      } else {
        return "";
      }
    },
    getReviewedOrder() {
      post(GET_STANDARD_HISTORYORDER, this.queryForm).then(resp => {
        const { total, rows } = resp;
        this.total = total;
        this.tableData = rows;
      });
    },
    getSteelGradeName() {
      post(GET_STEELGRADELIST, { steelGradeName: "" }).then(resp => {
        this.steelGradeList = resp.data;
      });
    },
    handleReset() {
      this.$refs["queryForm"].resetFields();
    },

    handleCurrentChange(current) {
      this.queryForm.current = current;
      this.getReviewedOrder();
    },
    handleSizeChange(page) {
      this.queryForm.page = page;
      this.handleCurrentChange(1);
    },

    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    goOrderRecord() {
      this.$router.push({
        path: "/standard/orderRecord"
      });
    },
    handleEdit(row) {
      this.$router.push({
        name: "standard-approvedOrder-infoCompliance",
        params: {
          id: row.id
        }
      });
    },
    // 订单复评
    handleOrderClick() {
      if (this.selectedRows.length == 0) {
        this.$message({
          message: "注意：请选择合同进行复评",
          type: "warning"
        });
      } else {
        let flag = false; // 判断是否可以复评
        let ids = this.selectedRows.map(item => {
          if (item.value2 != "0") {
            // value2 == 0 可以复评
            flag = true;
          }
          return item.id;
        });
        if (flag) {
          this.$message({
            message: "存在未走完流程的订单",
            type: "warning"
          });
          return;
        }
        post(BACKORDER, { contractInfoIdList: ids }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "操作成功",
              type: "success"
            });
          }
          this.getReviewedOrder();
        });
      }
    },
    // 获取顾客
    getCustomerNames() {
      post(GET_CUSTOMERNAMELIST, { customerName: "" }).then(resp => {
        this.customerList = resp.data;
      });
    },
    // 获取钢类
    getsteelTypeNames() {
      post(GET_STEELTYPELIST, { steelTypeName: "" }).then(resp => {
        this.steelTypes = resp.data;
      });
    }
  }
};
</script>

<style scoped>
</style>
